<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas-图形组合</title>
  <style>
    #canvas {
      margin-top: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<div>
  <label for="selected">
    <select name="" id="selected">
      <option value=""></option>
    </select>
  </label>
</div>

<canvas id="canvas"></canvas>
</body>
<script>
  let canvas = document.querySelector('#canvas');
  canvas.width = 500;
  canvas.height = 500;
  let ctx = canvas.getContext('2d');

  const globalCompositeOperationOptions = {
    'source-over': 'source-over',
    'destination-over': 'destination-over',
    'source-in': 'source-in',
    'destination-in': 'destination-in',
    'source-out': 'source-out',
    'destination-out': 'destination-out',
    'source-atop': 'source-atop',
    'destination-atop': 'destination-atop',
    'lighter': 'lighter',
    'xor': 'xor',
    'copy': 'copy'
  };

  let options = '';
  for (let [name, value] of Object.entries(globalCompositeOperationOptions)) {
    let option = `
      <option value="${value}">${name}</option>
    `;
    options += option
  }

  let select = document.querySelector('#selected');
  select.innerHTML = options;

  demoGlobalCompositeOperation(select.value);
  select.onchange = () => {
    demoGlobalCompositeOperation(select.value)
  };

  function demoGlobalCompositeOperation(option) {

    ctx.clearRect(0, 0, innerWidth, innerHeight);

    ctx.globalCompositeOperation = 'source-over';
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = 'pink';
    ctx.fill();

    ctx.globalCompositeOperation = option;

    ctx.fillStyle = 'skyblue';
    ctx.fillRect(100, 100, 100, 100)
  }

</script>
</html>
